<!-- src/App.vue -->
<template>
  <v-app :theme="appTheme">
    <v-app-bar app>
      <v-toolbar-title>我的博客</v-toolbar-title>

      <v-spacer></v-spacer>

      <ThemeSwitcher />
      <v-btn text to="/">首页</v-btn>

      <v-btn text to="/articles">文章</v-btn>

      <v-btn text to="/about">关于</v-btn>

      <v-btn text to="/admin">管理</v-btn>

    </v-app-bar>

    <v-main>
      <router-view></router-view>

    </v-main>

    <v-footer app>
      <span>&copy; 2024 我的博客</span>

    </v-footer>

  </v-app>

</template>

<script>
// import { mapState } from 'vuex'
import { useStore } from 'vuex'
import { computed, watch } from 'vue' 
import { useTheme } from 'vuetify'
import ThemeSwitcher from './components/ThemeSwitcher.vue'

export default {
  name: 'App',
  components: {
    ThemeSwitcher,
  },
  setup() {
    const store = useStore()
    const theme = useTheme()

    const appTheme = computed(() => store.state.appTheme)

    watch(appTheme, (newTheme) => {
      theme.global.name = newTheme
    }, { immediate: true }) // 可选：立即应用主题

    return {
      appTheme,
    }
  },
}
</script>
